<extend name="en_us:Public:base" />
<block name="title">
    <title>QRInn - QRBooking - picture</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/common_control.css?rev=9cadd27f32f06e0cee2d1abc1cff06cd">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/BookSettingPage/hotel.css?rev=82111311b035fcdb1cabeb350f888b92">
    <link rel="stylesheet" type="text/css" href="/Public/jslib/cropper/2.3.0/cropper.min.css?rev=4cd5b78b4c0581196ff92a4a5b9c140d">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/BookSettingPage/preview.css?rev=e87f0766a4b3225898ba01da7dcd7468">
</block>
<block name="document">
    <div id="doc" class="container-above-md">
        <include file="en_us:Public:Include_control_navbar" navbar-menu-setting="active" />
        <div id="doc-body" class="row">
            <include file="en_us:Public:Include_booking_tab" booking-tab-hotel="active" />
            <div id="doc-center">
                <div id="characterTabs" class="tabs ulite-js-tabs ulite-js-ripple-effect">
                    <div class="tabs-tab-bar tabs-tab-bar-left">
                        <a href="#cover-panel" class="tabs-tab is-active">Cover image</a>
                        <a href="#gallery-panel" class="tabs-tab">　Picture album　</a>
                        <a href="#character-panel" class="tabs-tab">Shopkeeper's Blog</a>
                    </div>
                    <div class="tabs-panel is-active" id="cover-panel">
                        <div class="row vertical-margin">
                            <div class="picture-container">
                                <div class="picture absolute-shade hidden">
                                    <a class="picture-re-upload text-sm text-accent absolute-shade text-center">Modify the picture</a>
                                </div>
                                <a class="picuture-upload"><span class="glyphicon glyphicon-plus"></span></a>
                            </div>
                            <div class="pull-left picture-container-align-margin">
                                <div class="btn-link picture-example-trigger ">Example
                                    <div class="picture-example">
                                        <img class="lazyload" src="/Public/dist/Home/image/cover.png" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tabs-panel" id="character-panel">
                        <div class="row vertical-margin show-the-cover">
                            <div id="shopkeeperClone" class="createShopkeeper">
                                <span>Create the Shopkeeper's Blog</span>
                                <span class="iconfont icon-question-sign picture-example-trigger"> 
                                    <div class="picture-example">
                                        <img class="lazyload" src="/Public/dist/Home/image/character.png" />
                                    </div>                               
                                </span>                                
                            </div>
                            <div class="createShopkeeper" id="edit-shopkeeper">
                                <span>Edit sort</span>                               
                            </div>
                        </div>
                        <div class="row vertical-margin hide-the-cover hidden">
                            <div class="left-float">
                                <div class="long-press">The length of the pallet is said to be sorted.</div>
                                <div class="">The Shopkeeper's Blog cover defaults to the first, non-modifiable location.</div>
                            </div>
                            <div class="right-float">
                                <div class="createShopkeeper sureShopkeeper">   
                                    <span>Save</span>   
                                </div>
                                <span></span>
                                <div class="createShopkeeper cancelShopkeeper">
                                    <span>Cancel</span>                               
                                </div>
                            </div>
                        </div>
                        <div class="row vertical-margin">
                            <div id="treasurerContainer"></div>
                            <div id="newTreasureContainer" class="hidden"></div>
                        </div>
                        <!--模态框-->
                        <div class="modal fade" id="shopkeeperChangeDescModal">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="btn close" data-dismiss="modal"><span>&times;</span></button>
                                        <h4 class="modal-title">Modify the photo description</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form class="form-horizontal form-sm fixed-content" id="character-form" onkeydown="if(event.keyCode==13){return false;}">
                                            <textarea type="text" class="form-control" maxlength="100" id="requestCharacterDesc" placeholder="Please enter a personality description(1~100)"></textarea>
                                        </form> 
                                    </div>
                                    <div class="modal-footer">
                                        <div class="col-xs-12 form-group">
                                            <div class="help-block inline-help-block"></div>
                                            <button type="submit" class="btn-primary btn-sm btn-raised " id="requestCharacterSubmit">OK</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="content-panel">
                            <div class="content-panel-header">
                                <div class="content-panel-title">Personality tag</div>
                            </div>
                            <div class="content-panel-body">
                                <div class="content-panel-help">Use some simple words to describe your accommodation</div>
                            </div>
                        </div>
                        <div class="row vertical-margin" id="character-container">
                        </div>
                    </div>
                    <div class="tabs-panel" id="gallery-panel">
                        <div class="row vertical-margin" id="gallery-container"></div>
                    </div>
                </div>
            </div>
            <!--end of doc-center-->
        </div>
        <!--end of doc body-->
    </div>
    <!--end of doc-->
    <include file="en_us:Public:Include_picture_cropper" />
    <!--js要用到的模板-->
    <script type="text/html" id="characterTag">
        <div class="character-tag character-tag-selected">
            <div class="character-tag-info"></div>
            <a class="character-tag-selected-sign glyphicon glyphicon-ok"></a>
            <a class="character-tag-remove iconfont icon-remove"></a>
        </div>
    </script>
    <script type="text/html" id="characterTagInput">
        <form class="form-horizontal form-sm character-tag" id="character-tag-form" onkeydown="if(event.keyCode==13){return false;}">
            <div class="form-group">
                <div class="col-xs-8 input-btn-group">
                    <input id="requestNewTag" maxlength="15" type="text" class="form-control" placeholder="Please enter the label name" />
                </div>
                <div id="requestTagSubmit" class="col-xs-4 btn-raised btn-accent ulite-js-btn ulite-js-ripple-effect input-btn-group-btn"><span class="glyphicon glyphicon-plus"></span></div>
            </div>
        </form>
    </script>
    <script type="text/html" id="templatePicture">
        <div class="picture-container">
            <div class="picture absolute-shade hidden">
                <div class="picture-re-upload text-sm text-accent absolute-shade text-center">Modify the picture
                    <a class="picture-remove iconfont icon-remove"></a>
                </div>
            </div>
            <a class="picuture-upload"><span class="glyphicon glyphicon-plus"></span></a>
        </div>
    </script>
    <script type="text/html" id="templateShopkeeper">
        <div class="picture-container" >
            <div class="picture absolute-shade"></div>
            <a class="picuture-upload"><span class="glyphicon glyphicon-plus"></span></a>
            <div class="personality-description"><p class="tiplog01"></p></div>
            <div class="cover-image cover-image-us hidden"></div>
            <div class="dropdown down_sign_container">
                <div data-toggle="dropdown" class="down_sign"></div>
                <ul class="dropdown-menu dropdown-menu-right shopkeeper_menu">
                    <li class="shopkeeper-Introduction" data-toggle="modal" data-target="#shopkeeperChangeDescModal"><a href="javascript:void(0);">Edit description</a></li>
                    <li class="picture-re-shopkeeper-upload"><a href="javascript:void(0);">Replace the picture</a></li>
                    <li class="shopkeeper-cover"><a href="javascript:void(0);">Set to cover</a></li>
                    <li class="shopkeeper-push"><a href="javascript:void(0);">Push the Shopkeeper's Blog</a></li>
                    <li class="clear"><a href="javascript:void(0);">Delete the Shopkeeper's Blog</a></li>
                </ul>            	
            </div>
        </div>
    </script>
    <script type="text/html" id="templateNewShopkeeper">
        <div class="picture-container" >
            <div class="picture absolute-shade"></div>
            <a class="picuture-upload"><span class="glyphicon glyphicon-plus"></span></a>
            <div class="personality-description"><p class="tiplog01"></p></div>
        </div>
    </script>
    <include file="Public:Include_preview" />
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/dist/Home/common_control.js?rev=482234be36e10d8f4d21ca9eee16ff2d"></script>
    <script type="text/javascript" src="/Public/jslib/cropper/2.3.0/cropper.min.js?rev=622bdc81acfb828b06e23a5ab59c315f"></script>
    <script type="text/javascript" src="/Public/jslib/canvas-to-blob/3.3.0/canvas-to-blob.min.js?rev=a0ad0191898c078a477dffe0aa7730e1"></script>
    <script type="text/javascript" src="/Public/jslib/jquery-ui-1.12.1.custom/jquery-ui.min.js?rev=e3daf929de9aaa0cc7818f2bea9666cc"></script>
    <script type="text/javascript" src="/Public/jslib/layer/layer.js?rev=f6448c2f02f6535d91cbd27193f2c56e"></script>
    <script type="text/javascript" src="/Public/dist/Home/BookSettingPage/cropper.js?rev=3ea98e6124baa39be08d5f6e02959898"></script>
    <script type="text/javascript" src="/Public/dist/Home/BookSettingPage/hotel.js?rev=c021b02caaae0a70ebf45348baf9551a"></script>
    <script type="text/javascript" src="/Public/jslib/qrcode/jquery-qrcode.min.js"></script>
    <script type="text/javascript" src="/Public/jslib/html2canvas/html2canvas.min.js"></script>
    <script type="text/javascript" src="/Public/jslib/filesaver/filesaver.min.js"></script>
    <script type="text/javascript" src="/Public/dist/Home/BookSettingPage/preview.js?rev=afcd2a543ab3f7d93abdc315e982ecd2"></script>
</block>
